<template>
  <div class="main">
    <div class="head-wrap ">
      <div class="flex-jsb">
        <div class="flex-ac">
          <img width="64" height="64" src="../../assets/image/ip-icon.svg" alt="" srcset="">
          <div class="ml25">
            <span class="fontS20">IP地址申请单：</span>
            <span class="fontS24">{{ currentData.orderTitle }}(单据编号{{ currentData.orderNum }})</span>
          </div>
        </div>
        <div>
          <div style="text-align: right;" class="color6">状态</div>
          <div class="fontS28">{{ currentData.stateName }}</div>
        </div>
      </div>
      <div class="head-content">
        <div class="flex-jsb mt25">
          <div>申请人：<span>{{ currentData.createUserName }}</span></div>
          <div>申请时间：<span>{{ formatDate(currentData.createTime, "yyyy-MM-dd hh:mm:ss") }}</span></div>
          <div>申请数量：<span>{{ currentData.assetCount }}</span></div>
        </div>
        <div class="flex-jsb mt15">
          <div>所属项目：<span>{{ currentData.proName }}</span></div>
          <div>项目负责人：<span>{{ currentData.proLeaderName }}</span></div>
          <div>备注：<span>{{ currentData.remark }}</span></div>
        </div>
      </div>
    </div>
    <div class="bottom-wrap mt15">
      <custom-head text="待分配资产">
        <el-button size="mini" @click="handleCancel">取消</el-button>
        <el-button size="mini" type="primary" @click="handleSelect">确定</el-button>
      </custom-head>
      <div class="table-wrap mt15">
        <el-table :data="showData" height="570" style="width: 100%" :cell-style="{ color: '#333' }" class="table">
          <el-table-column prop="assetNum" label="资产编号" width="300" show-overflow-tooltip />
          <el-table-column prop="assetTypeName" label="资产类型" width="150" show-overflow-tooltip />
          <el-table-column prop="hostName" label="主机名" show-overflow-tooltip />
          <el-table-column prop="hostNameCn" label="主机中文名" show-overflow-tooltip />
          <el-table-column prop="beSystem" label="所属业务" show-overflow-tooltip />
          <el-table-column prop="safeZoneName" label="安全分区" />
          <el-table-column prop="ipNetWork" label="应属IP地址段" show-overflow-tooltip />
          <!-- <el-table-column fixed="right" label="A网IP" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row, 'A')" type="text" size="small">分配</el-button>
            </template>
          </el-table-column> -->
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">分配</el-button>
            </template>
          </el-table-column>

        </el-table>
        <div class="flex-jsb">
          <div></div>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt15 systemPagination el-pagination">
          </el-pagination>
        </div>
      </div>
    </div>

    <el-dialog title="选择IP地址" :show-close="false" :titles="[]" :visible="dialogVisible" width="830px">

      <div class="flex">
        <div class="ip-wrap">
          <div v-for="item in ipNetworkList" :key="item.ipNetworkName" @click="chooseId(item)"
            :class="{ 'ip-item': true, 'active': ipNetwork.id == item.id, 'text-ov': true }">
            {{ item.ipNetworkName }}
          </div>
        </div>
        <div>
          <el-transfer v-model="value" :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}项'
          }" filterable :filter-method="filterMethod" filter-placeholder="请输入" :data="ipList"></el-transfer>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  ipAllotList, ipAllocationList, ipSetting, canSelectIpList, ipConform, canSelectIpNetWork
} from "@/api/ipManageApi.js";
import utils from "@/utils/date.js"
import customHead from "@/components/head/index.vue"
export default {
  components: { customHead },
  props: {
    id: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      value: [],
      ipList: [],
      dialogVisible: false,
      currentData: [],
      tableList: [],
      showData: [],
      total: 0,
      pageSize: 10,
      currentPage: 1,
      title: [],
      assetModel: "",
      allocationData: {},
      ipNetworkList: [],
      ipNetwork: {}
    };
  },
  mounted() {
    this.getIpAllocationList()
    this.getipAllotList(this.id)
  },
  methods: {
    // 
    handleSelect() {
      ipConform({ id: this.id }).then(res => {
        if (res.code == "200") {
          if (res.info) {
            this.$message("确认成功");
            setTimeout(() => {
              this.handleCancel();
            }, 1000);
            // this.getIpAllocationList();
            // this.getipAllotList(this.id);
          }
        }
      })
    },

    // 过滤
    filterMethod(query, item) {
      if (!query) return true;
      return query == item.label;
    },
    chooseId(value) {
      this.ipNetwork = value;
      console.log(this.ipNetwork, value);
      this.getcanSelectIpList(this.ipNetwork.ipNetwork, this.allocationData.id)
    },
    // 分配
    handleClick(data) {
      this.allocationData = data;
      // this.assetModel = assetModel;
      this.dialogVisible = true;

      console.log(data);
      canSelectIpNetWork({ id: data.id, safeZone: data.safeZone }).then(res => {
        console.log(res);
        if (res.code == "200") {
          this.ipNetworkList = res.info;
          this.ipNetwork = this.ipNetworkList[0];
          if (this.ipNetworkList.length) {
            this.getcanSelectIpList(this.ipNetwork.ipNetwork, this.allocationData.id)
          }
        }
      })
    },

    handleCurrentChange(val) {
      this.showData = this.tableList.slice((val - 1) * this.pageSize, this.pageSize * val)
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.showData = this.tableList.slice(0, val)
    },

    ok() {
      console.log(this.allocationData, this.value);
      this.ipSetting(this.allocationData, this.value)
    },

    // 获取可以分配列表
    getcanSelectIpList(ipNetWork, id) {
      this.title = []
      canSelectIpList({ ipNetWork, id }).then(res => {
        if (res.code == "200") {
          this.dialogVisible = true;
          this.value = res.info.ipSelected;
          this.ipList = res.info.ipSetting.map((item) => ({
            label: item,
            key: item
          }))
          console.log(this.ipList);
        }
      })
    },

    // 获取待分配资产列表
    getipAllotList(id) {
      ipAllotList({ id }).then(res => {
        if (res.code == "200") {
          this.tableList = res.info;
          this.total = res.info.length;
          this.showData = this.tableList.slice(0, this.pageSize);
        }
      })
    },
    // 获取所有待分配列表
    getIpAllocationList() {
      ipAllocationList().then(res => {
        if (res.code == "200") {
          if (res.info && res.info.length) {
            this.currentData = res.info.find((item) => item.id == this.id);
          }
        }
      })
    },

    formatDate(date) {
      return utils.formatter(date, "yyyy-MM-dd hh:mm:ss")
    },

    // 取消
    handleCancel() {
      this.$router.go(-1);
    },

    // ip分配
    ipSetting(data, value) {
      console.log(data);
      let ips = "";
      if (value && value.length) {
        ips = value.toString();
      }
      let ipRelationDto = {
        // assetBusinessCode: data.beSystem,
        assetId: data.id,
        // assetModel: this.assetModel,
        assetSerialNum: data.safeZone,
        assetNum: data.assetNum,
        ips,
        ipNetWorkId: this.ipNetwork.id
      };
      ipSetting(ipRelationDto).then(res => {
        if (res.code == "200") {
          if (res.info) {
            this.dialogVisible = false;
            this.$message("分配成功")
          }
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin: 0 auto;

  .head-wrap {
    padding: 20px 17px;
    border-radius: 6px;
    color: #333;
    font-size: 16px;

    /deep/ .el-form-item {
      margin-bottom: 0;

      .el-form-item__label {
        color: #000;
      }
    }

    .head-content {
      width: 80%;
      margin-left: 100px;

      .flex-jsb {
        &>div {
          flex: 1;

          span {
            color: #666;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .head-wrap,
  .bottom-wrap {
    background: #FFFFFF;
    box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
  }

  .bottom-wrap {
    padding: 15px;
    border-radius: 10px;
    height: 77%;
    overflow: hidden;

    .table-wrap {
      height: 100%;
      overflow: auto;
      color: #333;

      .table {
        border: 1px solid #F0F0F0;
        border-bottom: none;
        border-radius: 0px 0px 6px 6px;
        overflow: hidden;
      }


      /deep/ .el-table__header tr,
      /deep/ .el-table__header th {
        background-color: var(--system-table-header-bgc) !important;
        color: #333;
        font-weight: 400;
      }

      .state {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .state1 {
        background: #FF9000;
      }

      .state2 {
        background: #21B795;
      }
    }
  }

}

.ip-wrap {
  font-size: 16px;
  color: #333;
  height: 90%;
  width: 203px;
  overflow: auto;

  .ip-item {
    padding: 10px 20px;

    &:hover {
      background-color: rgba(33, 183, 149, 0.2);
      color: #fff;
    }

    &.active {
      background-color: #21B794;
      color: #fff;
    }
  }

}

.fontS28 {
  font-size: 28px;
  font-weight: bold;
}

.fontS24 {
  font-size: 24px;
}

.fontS20 {
  font-size: 20px;
}

.color6 {
  color: #666;
}

.color3 {
  color: #333;
}
</style>

